<template>
  <view :class="`my-empty ${className}`" :style="customStyle">
    <slot v-if="data"></slot>
    <view v-else class="empty-box">
      <image
        src="https://images-cloud.qboson.com/miniProgram/no_data_img.png"
      />
      <text>{{ text }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { type CSSProperties } from "vue";

withDefaults(
  defineProps<{
    className?: string;
    customStyle?: CSSProperties;
    text?: string;
    data?: any;
  }>(),
  {
    text: "暂无数据",
  }
);
</script>

<style scoped lang="scss">
.my-empty {
  .empty-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    image {
      width: 100px;
      height: 95.33px;
    }
    text {
      margin-top: 5px;
      text-align: center;
      font-size: 11px;
      line-height: 12.45px;
      color: rgba(0, 0, 0, 0.4);
    }
  }
}
</style>
